<style lang="less">
@import '../../static/less/variable.less';
.header {
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #f0f0f0;
    padding: @pad;
}
.my {
    padding: @pad;
    .user-image {
        width: 120px;
        height: 120px;
        margin: 20px auto;
        border: 1px solid #ccc;
        background-color: #f0f0f0;
        border-radius: 50%;
        overflow: hidden;
        img {
            width: 120px;
            height: 120px;
        }
    }
    .user-info {
        p {
            text-align: center;
            font-size: 18px;
            margin-bottom: 10px;
        }
        p:nth-child(2) {
            color: #ccc;
            font-size: 16px;
        }
    }
    .user-list {
        margin-top: 40px;
        ul {
            li {
                font-size: 18px;
                height: 44px;
                line-height: 44px;
                border-bottom: 1px solid #f0f0f0;
                margin-bottom: 15px;
            }
        }
    }
}

.about-me {
    padding: 10px 15px;
    text-align: center;
    p {
        margin-top: 5px;
    }
}
</style>

<template>
    <!-- <h3>个人中心</h3> -->
    <div class="header">
        <van-icon @click="jumpTo" name="arrow-left" />
    </div>
     <div class="my">
         <div class="user-image">
              <img v-if="userInfo.imgUrl"  :src="userInfo.imgUrl" alt="">
         </div>
         <div class="user-info">
               <p>{{ userInfo.nickName }}</p>
               <p>注册时间：{{ userInfo.createAt }}</p>
               <p>账号: {{ userInfo.account }}</p>
              
         </div>
         <div class="user-list">
             <ul>
                 <router-link to="/edit">
                    <li>
                        <van-icon name="photo-o" />
                        个人资料
                    </li>
                 </router-link>
                 <li @click="jumpToScore">
                    <van-icon name="label-o" />
                    我的成绩
                </li>

                
                <li @click="show=true">
                    <van-icon name="phone-o"  />
                    联系我们
                </li>

                 <router-link to="/secure">
                    <li>
                        <van-icon name="shield-o" />
                        账号安全
                    </li>
                </router-link>
             </ul>
         </div>
     </div>

     <!-- 弹出对话框 -->
     <van-dialog v-model:show="show" title="联系我们" show-cancel-button>
           <div class="about-me">
                <h3>电话:18316484142</h3>
                <p>WeChat：wangyongguo</p>
           </div>
     </van-dialog>
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router'
import request from '@/api/request'
import { reactive, ref } from 'vue'


const $router = useRouter()
// 获取用户临时身份
let token = localStorage.getItem("AUTOTOKEN")

// 定义用户数据
let userInfo = reactive({
    nickName:"",
    imgUrl: "",
    account: "",
    createAt: ""
})

// 定义用户中心初始化函数
const initUser = async (token: string) => {
    let isLogin = false;
    await request.userLogged({token})
    .then(
        content=> {
            // console.log(content)
            let {code} = content
            if(code == 200) {
                isLogin = true;
            }
        }
    )

    if(isLogin) {
        // 获取用户信息
       await  request.userInfo({token})
       .then(
            content=> {
                // console.log(content);
                let {code ,result} = content;
                if(code == 200) {
                    if(result.length == 1) {
                        // 解构赋值
                        let [ user ] = result;
                        userInfo.nickName = user.nickName
                        userInfo.account = user.account
                        userInfo.imgUrl = request.host+user.imgUrl;//头像
                        localStorage.setItem("USERIMG",userInfo.imgUrl);
                        localStorage.setItem("ACCOUNT",userInfo.account);
                        let date = new Date();
                        date.setTime(user.createAt);
                        userInfo.createAt = date.toLocaleDateString()+" "+ (date.toLocaleTimeString())

                    }
                }
            }
       )
    }
}


if(token){
    // 初始化
    initUser(token)
}
else {
    $router.replace({path: '/login'})
}

const jumpTo = ()=> {
    $router.push({path: '/home'})
}

const jumpToScore = ()=> {
    $router.replace({path:'/score'})
}



const show = ref(false);

</script>